<template>
	<div class="main-userinfo">
		<el-tabs v-model="activeName">
			<el-tab-pane label="资料完善" name="first">
				<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">

					<el-form-item label="注册手机号">
						<p>{{ userInfo && userInfo.mobile }}</p>
					</el-form-item>
					<el-form-item label="用户昵称" prop="username">
						<el-input v-model="ruleForm.username"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="gender">
						<el-radio-group v-model="ruleForm.gender">
							<el-radio label="1">男生</el-radio>
							<el-radio label="2">女生</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="生日">
						<el-form-item prop="date">
							<el-date-picker type="date" placeholder="选择日期" :editable="false"  v-model="ruleForm.date" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
					</el-form-item>
					<el-form-item label="所在地区">
						<!-- <el-form-item prop="date1">
							<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
						</el-form-item> -->

						<el-form-item prop="region">
							<el-select v-model="ruleForm.region" placeholder="请选择" @change="regionChange" style="width: 100%;">
								<el-option
									v-for="item in regions"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item prop="city">
							<el-select v-model="ruleForm.city" placeholder="请选择" style="width: 100%;">
								<el-option
									v-for="item in citys"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					</el-form-item>
				</el-form>

			</el-tab-pane>
			<el-tab-pane label="密码修改" name="second">
				<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm" size="small">
					<el-form-item label="密码" prop="pw">
						<el-input type="password" v-model="ruleForm2.pw" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="pw2">
						<el-input type="password" v-model="ruleForm2.pw2" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
						<el-button @click="resetForm('ruleForm2')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import { update, resetpw } from '@/api'
import addressData from '@/assets/js/addressData.js' // 地址
import { mapState, mapActions, mapMutations } from 'vuex'
import { setStore } from '@/util/util'

function formatData(data) {
	var result = [];
	for (var key in data) {
		result.push({
			value: key
		})
	}
	return result
}
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm2.pw !== '') {
				this.$refs.ruleForm2.validateField('pw2');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm2.pw) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			activeName: 'first',
			ruleForm: {
				username: '',
				date: '',
				gender: '',
				region: '',
				city: '',
			},

			ruleForm2: {
				pw: '',
				pw2: '',
			},
			rules2: {
				pw: [
					{ validator: validatePass, trigger: 'blur' }
				],
				pw2: [
					{ validator: validatePass2, trigger: 'blur' }
				],
			},
        	regions: formatData(addressData), // 省份
			region: '',

		}
	},
    computed: {
		...mapState([
			'userInfo',
			'login'
		]),
		citys: function () {
			return formatData(addressData[this.ruleForm.region])
		},
    },
	mounted() {
		this.setUerInfo();
	},
	methods: {
		...mapActions([
			'getUserInfo'
		]),
		...mapMutations([
			'DIALOG_LOGIN',
			'OUT_LOGIN',
		]),
		regionChange: function (val) {
			if (this.region != val && this.region != '') {
				this.ruleForm.city = '';
			}
			this.region = val; // oldVal
			var data = formatData(addressData[this.ruleForm.region]);
			for (var i = 0; i < data.length; i++) {
				this.$set(this.citys, i, data[i]);
			}
		},

		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let para_tmp = Object.assign({}, this.ruleForm);
					let date = para_tmp.date.split('-');
					let para = {
						uid: this.userInfo.user_id,
						user_id: this.userInfo.user_id,
						username: para_tmp.username,
						gender: para_tmp.gender,
						birth_year: date[0],
						birth_month: date[1],
						birth_day: date[2],
						region: para_tmp.region,
						city: para_tmp.city
					}
					update(para).then(res => {
						if(res.data){
							this.$message.success(res.msg);
							for(let i in para){
								this.userInfo[i] = para[i];
							}
							this.$store.state.userInfo = this.userInfo;
							setStore('userInfo', this.userInfo);
						}else{
							if(!res.tologin){
								this.$message.warning(res.msg);
							}else{
								this.$router.push('/');
								this.OUT_LOGIN();
							}
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		submitForm2(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let para = Object.assign({}, this.ruleForm2);
					para.uid = this.userInfo.user_id;
					para.user_id = this.userInfo.user_id;
					resetpw(para).then(res => {
						if(res.data){
							this.$message.success(res.msg);
							this.resetForm('ruleForm2')
						}else{
							if(!res.tologin){
								this.$message.warning(res.msg);
							}else{
								this.$router.push('/');
								this.OUT_LOGIN();
							}
						}
					})

				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		setUerInfo(){
			let para_tmp = Object.assign({}, this.userInfo);
			let para = {
				username: para_tmp.username,
				gender: para_tmp.gender,
				date: para_tmp.birth_year+'-'+para_tmp.birth_month +'-'+para_tmp.birth_day,
				region: para_tmp.region,
				city: para_tmp.city
			}
			this.ruleForm = para;
		}
	},
}
</script>

<style scoped lang="scss">
.main-userinfo {
	width: 500px;
}
</style>